<template>
    <div :id="'histogramData_' + echartsId" class="ichart"></div>
</template>

<script>
import * as echarts from 'echarts';
export default {
    name: 'GovSuperviseAdminTabularData',
    data() {
        return {
            myChart: '',
            dataList: [], //数据列表
            rawData: [],
            xaxisData: [],
        };
    },
    props: {
        echartsId: {
            type: String,
            default: '1'
        },
    },
    created() {

    },
    mounted() { },
    methods: {
        getDataList(data) { //获取areaId
            // this.dataList = data
            this.rawData = data.rawData
            this.xaxisData = data.xaxisData
            //y轴数据
            this.initChart()
        },
        domIsExistence(name) {
            if (name != null && name != "" && name != undefined) {
                name.dispose(); //解决echarts dom已经加载的报错
            }
        },
        // 交易数据汇总订单金额明细
        initChart() {
            this.domIsExistence(this.myChart)
            this.myChart = echarts.init(document.getElementById('histogramData_' + this.echartsId));
            let grid = {
                left: '6%',
                right: '6%',
                top: '12%',
                bottom: '15%'
            };
            let color = ['#657EFF', '#FFD644', '#5EEA96', '#FF4910']
            let seriesName = [
                '已签约客户数',
                '0天-2天未跟进',
                '3天-5天未跟进',
                '5天以上未跟进'
            ]
            let series = seriesName.map((name, sid) => {
                return {
                    name,
                    type: 'bar',
                    stack: 'total',
                    barWidth: '20%',
                    label: {
                        show: false,
                        formatter: (params) => Math.round(params.value * 1000) / 10 + '%'
                    },
                    data: this.rawData[sid]
                };
            });
            let legend = {
                selectedMode: false,
                // type: 'scroll',
                left: '3%',
                itemWidth: 20,
                itemHeight: 10,
                itemGap: 20,
                formatter: function (name) {
                    return '{oneone|' + name + '}';
                },
                textStyle: {
                    color: "#747474",
                    rich: {
                        oneone: {
                            align: 'center',
                            padding: [2, 0, 0, 0],
                            verticalAlign: 'middle',
                            fontSize: 13,
                        }
                    }
                }
            }
            let option = {
                legend,
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                color,
                grid,
                yAxis: {
                    type: 'value',
                    axisLabel: {
                        //y轴文字的配置
                        textStyle: {
                            color: "#9198A5",
                        },
                    },
                    axisTick: {
                        show: false,
                    },
                    axisLine: {
                        //y轴线的颜色以及宽度
                        show: true,
                        lineStyle: {
                            color: "#EEF1F7",
                            type: "solid",
                        },
                    },
                    splitLine: {
                        //分割线配置
                        show: true,
                        lineStyle: {
                            color: "#EEF1F7",
                        },
                    }
                },
                xAxis: {
                    type: 'category',
                    data: this.xaxisData,
                    axisLine: {
                        //x轴线的颜色以及宽度
                        show: true,
                        lineStyle: {
                            color: "#EEF1F7",
                        },
                    },
                    axisTick: {
                        show: false,
                    },
                    axisLabel: {
                        //x轴文字的配置
                        show: true,
                        interval:0,//横轴信息全部显示，必须设置
                        rotate:-30,//-30度角倾斜显示，根据页面布局实际可以自行调整
                        textStyle: {
                            fontSize:'13',
                            color: "#576276",
                        },
                    },
                    splitLine: {
                        //分割线配置
                        show: false,
                        lineStyle: {
                            color: "#EEF1F7",
                        },
                    },
                },
                series
            };
            if (this.echartsId == 2) {
                option.grid = {
                    left: 60,
                    right: 60,
                    top: 60,
                    bottom: 60
                };
                // box-shadow: 0px 0px 9px 0px #5DA7FF inset;
                option.color = ['#1B9CFF', '#FFD644', '#5EEAAF', '#FF4B13']
                option.legend.textStyle.color = '#2CA6FF'
                option.legend.itemGap = 12
                option.xAxis.axisLine.lineStyle.color = '#2CA6FF'  //x轴线的颜色以及宽度
                option.xAxis.axisLabel.textStyle.color = '#ffffff'  //x轴文字的配置
                option.yAxis.axisLine.lineStyle.color = '#2CA6FF'  //y轴线的颜色以及宽度
                option.yAxis.axisLabel.textStyle.color = '#ffffff'  //y轴文字的配置
                option.yAxis.splitLine.lineStyle.color = '#1A3DA5'  //y轴分割线配置
                option.tooltip.className = 'custom-tooltip-box'
                option.tooltip.formatter = function (params) {
                    // console.log('params',params)
                    let itemHtml = ''
                    params.forEach(res => {
                        let html = `
                        <div class='style-item'>
                            <div class='style-item-left'>
                                <span class='style-item-yuan' style='background:${res.color}'></span>
                                <span class='style-item-name'>${res.seriesName}</span>
                            </div>
                            <div class='style-item-right'>${res.value}</div>
                            </div>`
                        itemHtml += html
                    })
                    let res =
                        `
					<div class='custom-tooltip-style'>
						<div class='style-title'>${params[0].axisValue}</div>
						${itemHtml}
					</div>
					`
                    return res
                    // return params[0].axisValue + '</br>签约数量：' + 
                }
            }
            this.myChart.setOption(option)
        },
    },
};

</script>

<style lang="scss" scoped>
.ichart {
    width: 100%;
    height: 100%;
}

::v-deep {
    .custom-tooltip-box {
        padding: 0 !important;
        border: none !important;
        background-color: transparent !important;

        // 给子盒子自定义样式
        .custom-tooltip-style {
            border-radius: 6px;
            border: 1px solid #1B9CFF;
            box-shadow: 0px 0px 9px 0px #5DA7FF inset;
            background: #001C6C;
            width: 174px;
            box-sizing: border-box;
            height: auto;
            padding: 9px 15px 10px 12px;

            .style-title {
                font-size: 12px;
                font-weight: bold;
                color: #ffffff;
            }

            .style-item {
                font-size: 10px;
                color: #ffffff;
                display: flex;
                flex-direction: row;
                align-items: center;
                justify-content: space-between;
                margin-top: 9px;

                .style-item-left {
                    display: flex;
                    flex-direction: row;
                    align-items: center;

                    .style-item-yuan {
                        width: 7px;
                        height: 7px;
                        border-radius: 50%;
                        margin-right: 5px;
                    }
                }

                .style-item-right {}
            }
        }
    }
}
</style>
